<template>
	<gracePage headerBG="#FFFFFF">
		<view slot="gHeader" class="grace-bg-white">
			<view class="grace-header-body grace-relative">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34" style="" @tap="appFn.navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center"><text class="grace-h4 text-center font-size-36" style="font-size:36rpx;">申请退款</text></view>
				<!-- 消息按钮 -->
				<text class="grace-header-icons my-icons"></text>
			</view>
		</view>
		<!-- 页面主体 -->
		<view slot="gBody" style="margin-bottom: 150rpx;">
			<view class="grace-list m-2" >
				<view class="grace-list-items">
					<view class="my-list-image ucenter-face grace-relative">
						<image class="my-list-image ucenter-face-image" :src="goods.goods_img" mode="widthFix"></image>
					</view>
					<view class="grace-list-body">
						<view class="grace-list-title">
							<text class="my-list-title-text grace-h4 grace-ellipsis">{{ goods.goods_name }}</text>
						</view>
						<view class="grace-list-title pb-1">
							<text class="my-list-title-text grace-black9 grace-text">{{ goods.goods_attr }}</text>
						</view>
						<view class="grace-space-between mt-1 grace-flex-vcenter">
							<text class="grace-h5 grace-red">￥{{ goods.goods_price }}</text>
							<text class="font-size-22 pr-2">x{{ goods.goods_number }}</text>
						</view>
					</view>
				</view>
			</view>
			<divider></divider>
			<view class="m-2">
				<view class="grace-form-item">
					<text class="grace-form-label">{{index == '3' ? '退款' : '退货'}}原因</text>
					<view class="grace-form-body">
						<picker class="grace-form-picker" @change="bindPickerChange" :value="genderIndex" :range="gender">
							<text class="grace-text">{{gender[genderIndex]}}</text>
							<text class="grace-icons icon-arrow-down" style="margin-left:5px;"></text>
						</picker>
					</view>
				</view>
				
				<text class="grace-form-label" style="height: 70rpx;line-height: 70rpx;"> {{index == '3' ? '退款' : '退货'}}原因</text>
				<view class="release-content ">
					<view>
						<textarea name="content" placeholder="请填写问题描述" class="release-content-input" value="" v-model="textareades"/>
					</view>
				</view>
			</view>
			<divider></divider>
			<!-- 图片选择  -->
			<view class="grace-title grace-margin-top  mx-2">
				<text class="grace-title-text grace-black">上传凭证</text>
				<text class="grace-text-small grace-gray grace-icons icon-remove" @tap="clearAllImgs">清空图片</text>
			</view>
			<view style="margin-top:5rpx;" class="mb-3  mx-2">
				<graceSelectImgAndUpload :maxFileNumber="9" ref="selectimgandupload" @removeImg="removeImg" 
				@uploaded="imgLoaded" @change="imgsChange" @uploaderror="uploaderror" fileName="file" :formData="{'user_id':userInfo.user_id,'rec_id':orderId,'type':4}"
				uploadServerUrl="https://zhenzhixiao.cn/api/upload_form.php"></graceSelectImgAndUpload>
			</view>
			<divider></divider>
			<!--content -->
			<view class="grace-title grace-margin-top  mx-2">
				<text class="grace-title-text grace-black">留言</text>
			</view>
			<view class="release-content  mx-2">
				<view>
					<textarea name="content" placeholder="请填写留言" class="release-content-input" value="" v-model="textarealea"/>
				</view>
			</view>
		</view>
		<view slot="gFooter" class="grace-footer grace-flex-end">
			<button type="primary" class="grace-button width-full" @tap="submitApply" :disabled="disabled">
				{{subtxt}}
			</button>
		</view>
	</gracePage>
</template>
<script>
import gracePage from "@/graceUI/components/gracePage.vue";
import graceSelectImgAndUpload from "@/components/myVue/graceSelectImgAndUpload.vue";
import { mapState} from 'vuex';
export default {
	data(){
		return {
			textareades:'',
			textarealea:'',
			selectedimgs : [],
			// 上传按钮名称
			subtxt : "提交申请",
			// 订单id
			orderId:0,
			// 1 待付款 2 待发货 3 待收货
			index: 0,
			recId:0,
			goods: {},
			reasonList:[],
			gender : [],
			genderIndex : 0,
			disabled:false
			
		}
	},
	components:{
		gracePage, graceSelectImgAndUpload
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo
		}),
	},
	onLoad : function (e) {
		if(e.id) this.orderId = e.id;
		if(e.index) this.index = (e.index == '3') ? '1' : '3';
		if(e.recid) this.recId = e.recid;
		// 获取订单信息
		if(e.item) this.goods = JSON.parse(e.item);
		// 退货原因列表
		this.returnReason();
	},
	methods:{
	
		returnReason(){
			this.$HTTP.post('/api/api.php', {act:'get_cause'}, { token: true }).then(res=>{
				this.reasonList = res;
				this.gender = res.map(v=>v.cause_name);
			})
		},
		// 选择图片时引起的数据变化
		imgsChange : function (imgs){this.selectedimgs = imgs;},
		// 提交动态
		submitApply : function () {
			if(this.selectedimgs.length > 0){
				this.subtxt = "图片上传中";
				this.$refs.selectimgandupload.upload();
			}
			if(this.textareades === ''){
				this.subtxt = '提交申请';
				uni.showToast({title:"请填写退货原因", icon:"none"});
				return ;
			}
			let options = {
				act:'add_return',
				rec_id:this.recId,
				num:this.goods.goods_number,
				return_brief: this.textareades,
				return_type: this.index,
				remark: this.textarealea,
				cause_id:this.reasonList[this.genderIndex].cause_id,
			}
			this.$HTTP.post('/api/api.php', options, { token: true }).then(res=>{
				// 返回上一个页面并传参
				setTimeout(()=>{
					uni.navigateBack();
				},1500)
				uni.$emit("editOrderStatus");
			})
			
		},
		// 提交表单
		imgLoaded : function(res){
			this.subtxt = "数据提交中";
			// 提交数据 图片信息保存在 res 内[ 数组形式 ]
			// 内容保存在 textareaVal
			//连接 api 提交即可
			//提交成功页面跳转
		},
		uploaderror : function(){
			console.log('上传过程遇到错误');
		},
		// 清空图片
		clearAllImgs : function(){
			this.selectedimgs = [];
			this.$refs.selectimgandupload.clearAllImgs();
		},
		removeImg : function (e) {
			console.log('被删除的图片信息');
			console.log(e);
		},
		bindPickerChange:function(e){
			this.genderIndex = e.detail.value;
		},
	}
}
</script>
<style>
.release-content{margin-top:20rpx; background-color:#f7f7f7; border-radius:10rpx;}
.release-button{background:#3688FF; height:50rpx; padding:0 25rpx; line-height:50rpx; border-radius:50rpx; color:#FFFFFF; font-size:22rpx;}
.release-content-input{height:180rpx; font-size:28rpx; width:650; color:#8e8080; padding:25rpx; line-height:46rpx;}
.grace-button{
	height: 94rpx;
}
</style>